<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
	<!--绘制Canvas实例-->
<canvas id="myCanvas" width="200" height="100" 
		style="border: 1px solid rgb(0,0,0)"></canvas>
</body>
<script type="text/javascript">
	//找到Canvas对象
	var c = document.getElementById("myCanvas");
	//创建context对象
	var ctx = c.getContext("2d");
	//getContext("2d")对象是内建HTML5对象，
	//拥有多种绘制路径、矩形、圆形、字符、以及图像的方法
	ctx.fillStyle = "#FF0000";
	//fillStyle属性可以是CSS颜色，渐变，或图案。默认是黑色！
	//fillRect(x,y,width,height)方法定义了矩形当前的填充方式
	ctx.fillRect(0,0,150,75);
</script>
<body>
	<!--绘制Canvas 线条实例-->
<canvas id="myCanvas2" width="200" height="100" 
			style="border: 1px solid rgb(0,0,0)"></canvas>
</body>
<script type="text/javascript">
	//找到Canvas对象
	var c = document.getElementById("myCanvas2");
	//创建context对象
	var ctx = c.getContext("2d");
	//定义线条开始坐标
	ctx.moveTo(0,0);
	//定义线条结束坐标
	ctx.lineTo(200,100);
	//连接起始坐标和结束坐标
	ctx.stroke();
</script>
<body>
<br />
	<!--绘制Canvas 圆形实例-->
<canvas id="myCanvas3" width="200" height="100" 
			style="border: 1px solid rgb(0,0,0)"></canvas>
</body>
<script type="text/javascript">
	//找到Canvas对象
	var c = document.getElementById("myCanvas3");
	//创建context对象
	var ctx = c.getContext("2d");
	//绘制圆形图
	ctx.beginPath();
	//arc(x,y,r,start,stop)
	ctx.arc(95,50,40,0,2*Math.PI);
	ctx.stroke()
</script>
<body>
	<!--绘制Canvas 文本实例-->
<canvas id="myCanvas4" width="200" height="100" 
			style="border: 1px solid rgb(0,0,0)"></canvas>
</body>
<script type="text/javascript">
	//找到Canvas对象
	var c = document.getElementById("myCanvas4");
	//创建context对象
	var ctx = c.getContext("2d");
	//font定义字体
	ctx.font = "30px Arial";
	//fillText(text,x,y) 在canvas上绘制实心的文本
	//strokeText(text,x,y)在canvas上绘制空心的文本
	ctx.fillText("Hello World",10,50);
	ctx.strokeText("Hello World",10,80);
</script>
<body>
<br />
	<!--绘制Canvas 渐变实例-->
<canvas id="myCanvas5" width="200" height="100" 
			style="border: 1px solid rgb(0,0,0)"></canvas>
</body>
<script type="text/javascript">
	//找到Canvas对象
	var c = document.getElementById("myCanvas5");
	//创建context对象
	var ctx = c.getContext("2d");
	//createLinearGradient(x,y,x1,y1) 创建线条渐变
	//createRadialGradient(x,y,r,x1,y1,r1) 创建一个径向/圆渐变
	var grd = ctx.createLinearGradient(0,0,200,0);
	//addColorStop()方法指定颜色停止，参数使用坐标来描述，可以使0至1；
	grd.addColorStop(0,"red");
	grd.addColorStop(1,"white");
	//使用渐变，设置fillStyle或strokeStyle的值为渐变，然后绘制形状
	//如矩形，文本，或者是一条线
	ctx.fillStyle = grd;
	ctx.fillRect(10,10,150,80);
</script>
<body>
	<!--绘制Canvas 渐变实例-->
<canvas id="myCanvas6" width="200" height="100" 
			style="border: 1px solid rgb(0,0,0)"></canvas>
</body>
<script type="text/javascript">
	//找到Canvas对象
	var c = document.getElementById("myCanvas6");
	//创建context对象
	var ctx = c.getContext("2d");
	//createRadialGradient(x,y,r,x1,y1,r1) 创建一个径向/圆渐变
	var grd = ctx.createRadialGradient(75,50,5,90,60,100);
	//addColorStop()方法指定颜色停止，参数使用坐标来描述，可以使0至1；
	grd.addColorStop(0,"green");
	grd.addColorStop(1,"red");
	//使用渐变，设置fillStyle或strokeStyle的值为渐变，然后绘制形状
	//如矩形，文本，或者是一条线
	ctx.fillStyle = grd;
	ctx.fillRect(10,10,150,80);
</script>
<body>
<br />
	<!--绘制Canvas 图像实例-->
<canvas id="myCanvas7" width="200" height="100" 
			style="border: 1px solid rgb(0,0,0)"></canvas>
<img src="./background/bj1.jpg" id="scream" style="width:200px;height:100px;display: none">
</body>
<script type="text/javascript">
	//找到Canvas对象
	var c = document.getElementById("myCanvas7");
	//创建context对象
	var ctx1 = c.getContext("2d");
	var img = document.getElementById("scream");
	img.onload = function(){
		//drawImage(image,x,y)
		//drawImage(image,x,y,width,height)
		ctx1.drawImage(img,10,10,180,80);
	}
</script>
<body>
	<!--绘制Canvas 三角形边框实例-->
<canvas id="myCanvas8" width="200" height="100" 
			style="border: 1px solid rgb(0,0,0)"></canvas>
</body>
<script type="text/javascript">
	//找到Canvas对象
	var c = document.getElementById("myCanvas8");
	//创建context对象
	var ctx = c.getContext("2d");
	ctx.beginPath();
	ctx.moveTo(5,5);
	ctx.lineTo(150,5);
	ctx.lineTo(150,95);
	//虽然只绘制了两条线段
	//但是closePath会closePath，仍然是一个三角形
	ctx.closePath();
	//描边，stroke不会自动closePath（）
	ctx.stroke();
	
</script>
<body>
<br>
	<!--绘制Canvas 填充三角形实例-->
<canvas id="myCanvas9" width="200" height="100" 
			style="border: 1px solid rgb(0,0,0)"></canvas>
</body>
<script type="text/javascript">
	//找到Canvas对象
	var c = document.getElementById("myCanvas9");
	//创建context对象
	var ctx = c.getContext("2d");
	ctx.beginPath();
	ctx.moveTo(5,5);
	ctx.lineTo(150,5);
	ctx.lineTo(150,95);
	//填充闭合区域，如果path没有闭合，则fill()会自动闭合路径
	ctx.fill();
	
</script>
</html>